/* styles-菜单.css */

/* 重置一些默认的列表样式 */
ul,
li {
    margin: auto;
    padding: 0;
    list-style: none;
}

/* 设置主菜单的样式 */
.menu {
    background-color: lightgray;
}

.menu>li {
    position: relative;
    /* 这使得子菜单可以相对于主菜单项进行定位 */
    float: left;
}

.menu>li>a {
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.menu>li>a:hover {
    background-color: gray;
    /* 悬停时的背景颜色 */
}

/* 隐藏子菜单 */
.menu ul {
    display: none;
    position: absolute;
    top: 100%;
    /* 子菜单位于主菜单项的下方 */
    left: 0;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px lightgray;
    z-index: 1;
}

.menu ul li a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    /* 子菜单项文本左对齐 */
}

.menu ul li a:hover {
    background-color: #ddd;
    /* 子菜单项悬停时的背景颜色 */
}

/* 显示子菜单 */
.menu>li:hover>ul {
    display: block;
    /* 当鼠标悬停在主菜单项上时显示子菜单 */
}